<!-- <template>
    <el-container>
        <el-aside width="200px">
            <el-menu :default-active="$route.path"
                 class="el-menu-vertical-demo"
                 text-color="#0095B6"
                 ref="sideMenu"
                 active-text-color="#E85827">
            <qf-sub-menu :sideMenu='$store.state.userMenu'></qf-sub-menu>
            </el-menu>
        </el-aside>
        <el-container>
            <el-header>Header
                <a href="" @click.prevent="quit">点击退出登入</a>
            </el-header>
            <el-main>
                <router-view></router-view>
            </el-main>
        </el-container>
    </el-container>
</template> -->

<template>
	<el-container>
		<!-- aside -->
		<el-aside width="200">
			<h1 class="logo"></h1>
			<el-menu :collapse="collapse"
				class="el-qf-menu"
                text-color="#0095B6"
                ref="sideMenu"
                active-text-color="#E47833"
				>
			<qf-sub-menu :sideMenu="$store.state.userMenu"></qf-sub-menu>
			</el-menu>
		</el-aside>
		<el-container>
			<!-- header -->
			<el-header>
				<el-row type="flex"
					class="row-bg"
					justify="space-between">
					<!-- 顶部栏左侧收起/展开按钮图标位置 -->
					<el-col :span="6">
						<div class="grid-content left">
							<i @click="collapse = !collapse"
								:class="['iconfont', collapse ? 'icon-fold-right' : 'icon-shouqi1']"></i>
						</div>
					</el-col>
					<!-- 顶部栏中间标题部分 -->
					<el-col :span="6">
						<div class="grid-content center">
                            <img src="@/assets/imags/jntm.png" alt="">
                        </div>
					</el-col>
					<!-- 栅格布局 栅栏 -->
					<!-- 顶部栏右侧 头像 昵称 下拉菜单.. -->
					<el-col :span="6">
						<div class="grid-content right">
							<el-avatar shape="square"
								:size="40"
								:src="avatarUrl"></el-avatar>

							<b>
								<svg class="icon"
									v-if="userInfo.vipLevel"
									aria-hidden="true">
									<use :xlink:href="'#' + vipIconName"></use>
								</svg>
								<el-dropdown placement="bottom">
									<span class="nickname"
										:class="vipIconName + '-i'">
										{{ userInfo.nickname }}
										<i style="color: #fff"
											class="iconfont icon-down"></i>
									</span>
									<el-dropdown-menu>
										<el-dropdown-item divided
											v-if="userInfo.vipLevel"
											icon="iconfont icon-VIP4">vip到期时间:<br />{{ vipExpries }}
                                        </el-dropdown-item>
										<el-dropdown-item divided
											icon="iconfont icon-VIP4"
                                            @click.native="$router.push({path:'/vipmanager/charge'})">vip充值
                                        </el-dropdown-item>
										<el-dropdown-item divided
											icon="iconfont icon-icon-test"
                                            @click.native="$router.push({path:'/mine'})">账号信息
                                        </el-dropdown-item>
										<el-dropdown-item divided
											icon="iconfont icon-shangpinguanli"
                                            @click.native="$router.push({path:'/studentmanager/studentproduct'})">项目管理
                                        </el-dropdown-item>
										<el-dropdown-item divided
											icon="iconfont icon-tuichu2"
											@click.native="quit">退出</el-dropdown-item>
									</el-dropdown-menu>
								</el-dropdown>
							</b>
							&nbsp;
							<!-- <b @click="quit"
								class="quit">退出</b> -->
						</div>
					</el-col>
				</el-row>
			</el-header>
			<!-- main -->
			<el-main>
				<!-- 面包屑 -->
				<el-breadcrumb separator="/">
					<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
					<el-breadcrumb-item :to="{ name: bread.name }"
						v-for="bread in breadCrumb"
						:key="bread.name">
						{{ bread.meta.name }}
					</el-breadcrumb-item>
				</el-breadcrumb>
				<router-view></router-view>
			</el-main>
		</el-container>
	</el-container>
</template>


<script>
	import { mapState } from "vuex";
	import moment from "moment";
    // import subMenu from '../../components/subMenu'
	export default {
    computed: {
        ...mapState(["userInfo", "sideMenu", "breadCrumb"]),
        vipExpries() {
            // 	//vip过期时间
            let stamp = this.userInfo.vipStamp;
            let date = moment(stamp).format("YYYY-MM-DD HH:mm:ss");
            return date;
        },
        vipIconName() {
            //计算vip图标名称
            let { vipLevel } = this.userInfo;
            if (vipLevel === 1) {
                return "icon-vip";
            }
            else if (vipLevel === 2) {
                return "icon-vip2";
            }
            else if (vipLevel === 3) {
                return "icon-vip_3";
            }
            else {
                return "";
            }
        },
        avatarUrl() {
            //如果用户没有头像,就使用默认头像,如果有,就使用用户头像;
            return this.userInfo.headimgurl
                ? this.userInfo.headimgurl
                : "https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png";
        },
    },
    mounted() { },
    data() {
        return {
            collapse: false,
        };
    },
    methods: {
        // //command 右上角用户下拉菜单触发事件
        // command(routerName) {
        //     //routerName就是下拉菜单传入的路由名字
        //     if (routerName) {
        //         this.$router.push({ name: routerName });
        //     }
        // },
        cancel() {
            //取消,中断请求
            this.cancelToken();
        },
        quit() {
            //退出登入
            //1.清除token
            localStorage.removeItem("sw-token");
            //2.跳转到登入页
            this.$router.push("/login");
            //3.刷新页面
            location.reload();
        },
    },
};
</script>

<style scoped lang="less">
    .icon-vip-i,
    .icon-vip2-i,
    .icon-vip_3-i {
        color: #f4c14f !important;
        font-weight: bolder !important;
    }
    .icon {
        width: 5em;
        height: 1.5em;
        vertical-align: middle;
    }
    .el-dropdown-menu,
    .el-dropdown-menu__item,
    .el-dropdown-menu__item--divided:before {
        background-image: linear-gradient(
            135deg,
            rgb(129, 216, 208),
            rgb(0, 140, 140)
        );
        color: #fff;
        text-align: center;
        font-weight: bolder;
    }
    .el-dropdown-menu {
        width: 200px;
    }
    .el-header {
        min-height: 60px !important;
        background: linear-gradient(135deg, #517693, #81D8D0);
        color: #fff;
        font-weight: bolder;
        text-align: center;
        // line-height: 60px;
        line-height: 40px;
        .left {
            text-align: left;

            i {
                font-size: 30px;
                cursor: pointer;
            }
        }
        .center {
            font-size: 30px;
        }
        .el-avatar {
            vertical-align: middle;
            margin-right: 10px;
        }
        .quit {
            color: deeppink;
            text-decoration: underline;
            cursor: pointer;
        }
        .nickname {
            margin-left: 5px;
            color: #fff;
            cursor: pointer;
        }
    }

    .el-aside {
        background: linear-gradient(135deg, #517693, #81D8D0);
        color: #333;
        text-align: center;
        // line-height: 200px;
        .logo {
            min-height: 60px;
            // background-image: url(http://chst.vip:8081/stu2/img/logo.be8bbddf.png);
            background-image: url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.huaban.com%2F85c1f645265c31557d40c301353cdb16cc03f1db100436-Wn7QTj_fw658&refer=http%3A%2F%2Fhbimg.huaban.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1664431658&t=0dad13f26dc0b0ffc7842edcfd84e883);
            background-size: 80%;
            background-repeat: no-repeat;
            background-position-y: center;
            background-position-x: 40%;
        }
        .subMenu {
            text-align: left;
        }

        /deep/ .el-qf-menu:not(.el-menu--collapse) {
            width: 200px;
            min-height: 500px;
            background-color: rgba(251, 253, 255, 0.792);
        }
        //菜单文字样式
        /deep/ .el-menu-item,
        /deep/ .el-submenu__title {
            color: #1A5599;
            // font-weight: bold;
        }
        //菜单图标样式
        /deep/ .iconfont {
            color: #1A5599;
            font-weight: normal;
        }
        //菜单激活样式
        /deep/ .el-menu-item.is-active {
            color: #FADA5E;
        }
        /deep/ .el-menu-item.is-active {
            color: rgb(228, 120, 51);
            .iconfont {
                color: rgb(228, 120, 51);
                font-weight: normal;
            }
        }
    }

    .el-main {
        background-color: #fff;
        color: #333;
        text-align: center;
        // line-height: 160px;
        .el-breadcrumb {
            margin-top: 20px;
            margin-bottom: 30px;
            // /deep/ .el-breadcrumb__inner {
            // 	color: #4e59e9!important;
            // }
            // /deep/ .is-link {
            // 	color:hotpink!important;
            // }
        }
    }

    .el-container {
        margin-bottom: 40px;
        height: 100%;
    }

    .el-container:nth-child(7) .el-aside {
        line-height: 320px;
    }
    // 顶栏laout
    .el-row {
        margin-bottom: 20px;
        &:last-child {
            margin-bottom: 0;
        }
    }
    .el-col {
        border-radius: 4px;
    }

    .grid-content {
        border-radius: 4px;
        min-height: 36px;
    }
    .row-bg {
        padding: 10px 0;
        .grid-content>img{
            width: 180px;
        }
    }
</style>